<template>
  <div class="paid">
    <div>
      <div class="top">
        <div class="left">
          <h1>(总共{{computed_account}}份)</h1>
        </div>
        <div class="right">
          <span><i>¥</i>{{computed_sum.toFixed(2)}}</span>
          <el-button @click="toorder">点击下单</el-button>
        </div>
      </div>
      <div v-show="!newlist.length ==0">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>商品名称</th>
              <th>商品单价</th>
              <th>数量</th>
              <th>价格</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(ele,index) in newlist"
              :key="index"
            >
              <td>
                <img
                  :src="'http://localhost:3000'+ele.imgUrl"
                  alt=""
                >
              </td>
              <td>
                {{ele.name}}
              </td>
              <td>
                ¥{{ele.price.toFixed(2)}}/份
              </td>
              <td class="number">
                <el-button
                  class="default-button-style"
                  @click="del(ele.account,ele._id,-1)"
                >-</el-button>
                <input
                  readonly
                  type="text"
                  v-model="ele.account"
                >
                <el-button
                  class="default-button-style"
                  @click="add(ele._id,1)"
                >+</el-button>
              </td>
              <td>
                {{(ele.account*ele.price).toFixed(2)}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="nolist" v-show="newlist.length ==0">
      暂无商品,<router-link to="/index/foods/bottom/1">点击去下单</router-link>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "NoPaid",
  data(){
    return {
      sum:0
    }
  },
  computed: {
    // 个人信息
    ...mapState({
      info: (state) => {
        return state.user.info;
      },
    }),
    ...mapState({
      newlist: (state) => {
        return state.food.new_list;
      },
    }),
    // 总价
    computed_sum(){
      return this.newlist.reduce((now,ele)=>{
        return now +ele.price*ele.account
      },0)
    },
    // 总数量
    computed_account(){
      return this.newlist.reduce((now,ele)=>{
        return now +ele.account
      },0)
    }
  },
  methods: {
    del(account, _id,num) {
      if (account == 1) {
         this.$alert('数量不能小于1', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        return;
      }
      this.$store.dispatch('updateAccount',{_id,num})
    },
    add(_id,num) {
       this.$store.dispatch("updateAccount", {_id,num});
    },
    toorder(){
      if(this.newlist.length ==0){
         this.$alert('当前暂无商品，请先去下单', {
          confirmButtonText: '确定',
        });
        return
      }else{
        this.$message({
          message: '下单成功!',
          type: 'success',
          duration:1000,
        });
        this.$store.commit('DEL_ALL_NEWLIST')
        this.$store.dispatch('toOrder',{user_id:this.info.id})
      }
     
    }
  },
};
</script>

<style lang="less" scoped>
.paid {
  padding: 20px;
  width: 1000px;
  height: 100%;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 15px;
  margin: 0 auto;
  .top {
    display: flex;
    height: 60px;
    line-height: 40px;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    .right {
      span {
        margin-right: 10px;
        color: #ff5000;
        font-size: 24px;
        i {
          margin-right: 5px;
          font-size: 18px;
        }
      }
      button {
        padding: 0 6px;
        box-sizing: border-box;
        width: 90px;
        height: 40px;
        background-color: #ff5000;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 15px;
        cursor: pointer;
        font-size: 16px;
      }
    }
  }
  table {
    margin-left: 10px;
    width: 1000px;
    font-size: 16px;
    img {
      width: 40px;
      height: 40px;
    }
    thead {
      th {
        text-align: center;
        width: 20%;
      }
    }
    tbody {
      tr {
        td {
          padding: 10px;
          text-align: center;
          width: 20%;
        }
      }
    }
    .number {
      padding: 19px 80px;
      width: 20%;
      box-sizing: border-box;
      display: flex;
      // background-color: pink;
      ::v-deep button {
        margin-right: 2px;
        width: 20px;
        border-radius: 5px;
        border: 1px solid rgba(198, 218, 194, 0.267);
        cursor: pointer;
      }
      .default-button-style {
        background: #fff;
        border-color: #cbcbcd;
      }
      .default-button-style:hover {
        background: #ecf5ff;
        border: 1px solid #409eff;
      }
      input {
        text-align: center;
        width: 50px;
        margin-right: 2px;
        border-radius: 5px;
        border: 1px solid rgba(198, 218, 194, 0.267);
      }
    }
  }
  .nolist{
    font-size: 20px;
    text-align: center;
    margin-top: 50px;
    line-height: 40px;
    // width: 500px;
    height: 40px;
    // background-color: pink;
  }
}
</style>